<template>
	<view class="containerbox">
		<ranking_header :bgsrc="`${imgPath}image/bj.svg`" :header-bg-height="464" :centent-margin-top="-90" class="containerbox">
			<z-paging class="round-tl-20 round-tr-20 px-30 containerbox" ref="paging" v-model="list" @query="querylist">
				<template #loading>
					<dw_loading :status="loading" />
				</template>
				
				<template #top>
					<uv-navbar title="我的学习进度" auto-back  @left-click="backClick" placeholder bg-color="none" title-style="color:white" left-icon-color="white" />
					
					<view class="flex-between flex-center px-30">
						<view class="text-primary">
							<view class="text-52 font-weight-700">学习进度</view>
							<view class="text-26 mt-15">完成度=所有格子数量/词库总数</view>
						</view>
						
						<view class="" style="width:336rpx;height:232rpx;">
							<uv-image class="" :src="`${imgPath}image/plan.svg`" width="336rpx" height="232rpx" />
						</view>
					</view>
				</template>
				
				<view class="round-lg bgc-white pt-30 px-30" v-if="!loading && list.length!=0">
					<view 
						class="plan_cont flex-between mb-30 pb-30 bgc-white" 
						v-for="({ knowWords, id, course }, index) in list" 
						:key="id"
						:class="{ 'border-bottom': index + 1 != list.length }"
					>
						<view class="flex-1 flex-col">
							<view class="text-30 font-weight-600">{{ course.name }}</view>
							<view class="text-28 mt-15 flex items-center"> 
								<text class="color1">{{ knowWords }}</text>
								<text class="color2 mr-20">/{{ course.words }}</text> 
								<uv-line-progress :percentage="(knowWords/course.words)*100" activeColor="#40D463" height="10rpx" :showText="false" />
							</view>
							
						</view>
						
						<fui-button text="复习" class="ml-30" @click="goOver(course.id)" width="100rpx" height="54rpx" size="26" />
					</view>
				</view>
			</z-paging>
		</ranking_header>
	</view>
</template>

<script setup>
	
	import ranking_header from '@/pages/components/header' 
	import { ref } from 'vue'
	import { imgPath } from '@/common/config.js'
	import { planList } from '@/common/apis/study'
	
	let paging = ref(null)
	let list = ref([])
	let loading = ref(true)
	
	async function querylist(page, pageSize) {//获取列表
		let params = { page, pageSize, simplePage: 1 }
		let result = await planList(params)
		paging.value.complete(result)
		uni.$fui.sleep(() => loading.value = false)
	}
	
	let goOver = id => uni.$fui.href('/pages/study/goOver', { id ,type: 0 })
	let backClick = () => uni.navigateBack()
	
</script>

<style>page{background: #F8F8F8}</style>
<style scoped lang="scss">
	.plan_cont{color: #3A3F5E}
	.color1{color: #40D463}
	.color2{color: #626780}
</style>